<template>
	<view class="container">
		<view class="title">非共同生活法定赡养、抚养、义务人情况</view>
		<image class="uploadFile" src="/static/kancha/uploadFile.png"></image>
		<view class="options">
			<view class="optionsLeft">与申请人关系</view>
			<view class="optionsRight">子女</view>
		</view>
		<view class="options">
			<view class="optionsLeft">姓名</view>
			<view class="optionsRight">收拾</view>
		</view>
		<view class="options">
			<view class="optionsLeft">有无赡（抚、扶）养能力</view>
			<view class="optionsRight">无</view>
		</view>
		<view class="bottomOptions">
			<view class="bottomTitle">无赡（抚、扶）养能力原因</view>
			<view class="bottomOptionsBox">
				<view class="bottomOptionsBoxIn">
					<image class="chooseIcon" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">低收入</view>
				</view>
				<view class="bottomOptionsBoxIn">
					<image class="chooseIcon" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">支出贫困</view>
				</view>
			</view>
		</view>
		<view class="options">
			<view class="optionsLeft">身份证号</view>
			<view class="optionsRight">22423132165465132</view>
		</view>
		<view class="options">
			<view class="optionsLeft">家庭住址</view>
			<view class="optionsRight">
				<view class="position">18518968960</view>
				<image class="positionIcon" src="/static/anfangDetail/position.png" mode=""></image>
			</view>
		</view>
		<view class="options">
			<view class="optionsLeft">年赡（抚、扶）养费</view>
			<view class="optionsRight">
				<view class="personNum">5371</view>
				<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
			</view>
		</view>

		<view class="bottomOptions">
			<view class="bottomTitle">致贫原因</view>
			<view class="bottomOptionsBox">
				<view class="bottomOptionsBoxIn" v-for="(item,index) in 10" :key="index">
					<image class="chooseIcon" src="/static/kancha/choose.png"></image>
					<image class="chooseIcon" src="/static/kancha/nochoose.png"></image>
					<view class="bottomOptionsTitle">养老</view>
				</view>
			</view>
		</view>
		<view class="button" @click="link">
			提交
		</view>
		<view class="bottom"></view>
	</view>
</template>

<script>
	export default {
		methods: {
			link() {
				uni.redirectTo({
					url: '/pages/getInfo/familyGetMoneyInfo'
				})
			}
		}
	}
</script>

<style>
	page {
		background: white;
	}
</style>
<style scoped>
	.title {
		font-size: 26rpx;
		color: #fa5245;
		line-height: 1;
		text-align: center;
		padding-bottom: 20rpx;
		padding-top: 50rpx;
	}

	.options {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		display: flex;
		align-items: center;
		height: 86rpx;
		padding: 0 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.optionsLeft {
		font-size: 30rpx;
		color: #ccc;
	}

	.optionsBottomTitle {
		font-size: 30rpx;
		color: #ccc;
	}

	.optionsRight {
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}

	.optionsBottomBottom {
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.position {
		max-width: 360rpx;
	}

	.positionIcon {
		width: 27rpx;
		height: 38rpx;
		margin-left: 25rpx;
	}

	.sanjia {
		width: 23rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}

	.kongge {
		width: 20rpx;
	}

	.optionsBottomBox {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.line {
		height: 26rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
	}

	.uploadFile {
		width: 184rpx;
		height: 143rpx;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.wordBox {
		padding: 20rpx 80rpx;
	}

	.wordBox text {
		color: #fa5245;
	}

	.wordOptions {
		font-size: 22rpx;
		color: #ccc;
	}

	.bottomOptions {
		width: 670rpx;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 6rpx;
	}

	.bottomTitle {
		color: #ccc;
	}

	.bottomOptionsBox {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.bottomOptionsBoxIn {
		width: 290rpx;
		display: flex;
		align-items: center;
		height: 45rpx;
	}

	.chooseIcon {
		width: 28rpx;
		height: 27rpx;
	}

	.bottomOptionsTitle {
		margin-left: 28rpx;
	}

	.button {
		width: 570rpx;
		line-height: 84rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg, #fa5444, #ff988f);
		font-size: 28rpx;
		color: white;

	}

	.bottom {
		height: 160rpx;
	}
</style>
